<template>
  <pc-nav></pc-nav>
<!--  <bread v-if="siteBar.type" :sitebar="siteBar.data"></bread>-->
  <div class="container">
    <view navbar="none" class="d-flex align-items-stretch">
      <user-left style="flex-basis: 240px; height: auto; width: 240px" @selectPath="onSelectPath"></user-left>
      <view class="separator"></view>
      <!--右侧开始-->
      <view class="flex-grow-1 overflow-auto ss-p-x-20 ss-p-t-20" style="width: 950px">
        <view>
          <view class="header-text" v-if="path === 'mylubo'">录播课</view>
          <view class="header-text" v-else-if="path === 'myzhibo'">直播课</view>
          <view class="header-text" v-else-if="path === 'mygongkai'">公开课</view>
          <view class="header-text" v-else-if="path === 'cart'">购物车</view>
          <view class="header-text" v-else-if="path === 'order'">订单中心</view>
          <view class="header-text" v-else-if="path === 'coupon'">优惠券</view>
          <view class="header-text" v-else-if="path === 'grouponorder'">拼团订单</view>

          <view class="header-text" v-else-if="path === 'myduihuan'">我的增值包</view>

          <view class="header-text" v-else-if="path === 'duihuan'">增值包兑换</view>

          <view class="header-text" v-else-if="path === 'orderDetail'">订单详情</view>
          <view class="header-text" v-else-if="path === 'wallet'">我的钱包</view>
          <view class="header-text" v-else-if="path === 'coupon'">优惠券</view>
          <view class="header-text" v-else-if="path === 'mytiku'">我的题库</view>
          <view class="header-text" v-else-if="path === 'mytikuDetail'">我的题库</view>
          <view class="header-text" v-else-if="path === 'question'">在线答疑</view>
          <view class="header-text" v-else-if="path === 'addquestion'">提交答疑</view>
          <view class="header-text" v-else-if="path === 'zhuiwen'">答疑追问</view>
          <view class="header-text" v-else-if="path === 'grouponorder'">拼团订单</view>
          <view class="header-text" v-else-if="path === 'grouponDetail'">拼团订单详情</view>
          <view class="header-text" v-else-if="path === 'faq'">使用指南</view>
          <view class="header-text" v-else-if="path === 'feedback'">意见反馈</view>
          <view class="header-text" v-else-if="path === 'richtext'">使用指南</view>
          <view class="header-text" v-else-if="path === 'success'">兑换成功</view>
          <view class="header-text" v-else-if="path === 'vaspindex'">增值包兑换</view>
          <view class="header-text" v-else-if="path === 'vasplist'">增值包内容</view>
          <view class="header-text" v-else-if="path === 'myduihuan'">我的增值包</view>
          <view class="header-text" v-else-if="path === 'myziliao'">我的资料</view>
          <view class="header-text" v-else-if="path === 'goodCommentadd'">商品评价</view>
          <view class="header-text" v-else-if="path === 'studyreport'">学习报告</view>
		  <view class="header-text" v-else-if="path === 'zbcalendar'">直播日历</view>
		  
        </view>

        <myduihuan class="align-self-stretch b-white" v-if="path === 'myduihuan'"></myduihuan>
        <duihuan class="align-self-stretch bg-white" v-else-if="path === 'duihuan'"></duihuan>
        <success class="align-self-stretch b-white" v-else-if="path === 'success'"></success>
        <vaspindex class="align-self-stretch b-white" v-else-if="path === 'vaspindex'"></vaspindex>
        <vasplist class="align-self-stretch b-white" v-else-if="path === 'vasplist'"></vasplist>
        <mylubo class="b-white" v-else-if="path === 'mylubo'"></mylubo>
        <myzhibo class="b-white" v-else-if="path === 'myzhibo'"></myzhibo>
        <mygongkai class="b-white" v-else-if="path === 'mygongkai'"></mygongkai>
        <studyreport class="b-white" v-else-if="path === 'studyreport'"></studyreport>
        <myziliao class="b-white" v-else-if="path === 'myziliao'"></myziliao>
        <cart-list class="b-white" v-else-if="path === 'cart'" :forUserCenter="true"></cart-list>
        <order-detail class="align-self-stretch b-white" v-else-if="path === 'orderDetail'" :orderSN="orderSN" @onGrouponDetail="onGrouponDetail"></order-detail>
        <goodCommentadd class="align-self-stretch b-white" v-else-if="path === 'goodCommentadd'" :orderSN="orderSN" @ongoodscomment="onGrouponDetail"></goodCommentadd>
        <order-list class="align-self-stretch b-white" v-else-if="path === 'order'" @orderDetail="onOrderDetail" @onGrouponDetail="onGrouponDetail"></order-list>
        <my-wallet class="b-white" v-else-if="path === 'wallet'"></my-wallet>
        <coupon-list class="align-self-stretch b-white" v-else-if="path === 'coupon'"></coupon-list>
        <my-tiku class="align-self-stretch b-white" v-else-if="path === 'mytiku'" @tikuDetail="onTikuDetail"></my-tiku>
        <s-tiku-chapters class="align-self-stretch b-white" v-else-if="path === 'mytikuDetail' && tikuId && tikuGoodsId" :show-title="true" :id="tikuId" :goods_id="tikuGoodsId"></s-tiku-chapters>
        <question class="align-self-stretch b-white" v-else-if="path === 'question'"></question>
        <addquestion class="align-self-stretch b-white" v-else-if="path === 'addquestion'"></addquestion>
        <zhuiwen class="align-self-stretch b-white" v-else-if="path === 'zhuiwen'"></zhuiwen>
        <grouponorder class="align-self-stretch b-white" v-else-if="path === 'grouponorder'" @onOrderDetail="onOrderDetail" @onGrouponDetail="onGrouponDetail"></grouponorder>
        <groupon-detail class="align-self-stretch b-white" v-else-if="path === 'grouponDetail'" @onOrderDetail="onOrderDetail" :id="grouponId"></groupon-detail>
        <faq class="align-self-stretch b-white" v-else-if="path === 'faq'"></faq>
        <feedback class="align-self-stretch b-white" v-else-if="path === 'feedback'"></feedback>
<!--        <feedback class="align-self-stretch b-white" v-else-if="path === 'feedback'"></feedback>-->
        <richtext class="align-self-stretch b-white" v-else-if="path === 'richtext'"></richtext>
		<zbcalendar class="align-self-stretch b-white" v-else-if="path === 'zbcalendar'"></zbcalendar>
        <user-info class="align-self-stretch b-white" v-else></user-info>
		

      </view>

    </view>
  </div>
  <pc-footer></pc-footer>
</template>

<script setup>
  import {
    computed,
    reactive,
    ref,
  } from 'vue';
  import {
    onShow,
    onLoad
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import PcNav from '@/sheep/components/pc-nav/pc-nav.vue';
  import Bread from '@/sheep/components/bread/bread.vue';
  import UserLeft from '@/pages/user/components/user-left.vue';
  import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';
  import SLayoutPc from '@/sheep/components/s-layout-pc/s-layout-pc.vue';
  import duihuan from '@/pages/vasp/duihuan.vue';
  import myduihuan from '@/pages/vasp/index.vue';
  import mylubo from '@/pages/user/course/mylubo.vue';
  import myzhibo from '@/pages/user/course/myzhibo.vue';
  import mygongkai from '@/pages/user/course/mygongkai.vue';
  import myTiku from '@/pages/user/course/mytiku.vue';
  import myziliao from '@/pages/user/course/myziliao.vue';
  import studyreport from '@/pages/user/course/studyreport.vue';
  import cartList from '@/pages/index/components/cart-list.vue';
  import orderList from '@/pages/order/user-order-list-pc.vue';
  import orderDetail from '@/pages/order/user-order-detail-pc.vue';
  import myWallet from '@/pages/user/wallet/money.vue';
  import couponList from '@/pages/coupon/list.vue';
  import userInfo from '@/pages/user/info.vue';
  import question from '@/pages/public/question.vue';
  import addquestion from '@/pages/public/addquestion.vue';
  import zhuiwen from '@/pages/public/zhuiwen.vue';
  import grouponorder from '@/pages/activity/groupon/order.vue';
  import grouponDetail from '@/pages/activity/groupon/detail.vue';
  import faq from '@/pages/public/faq.vue';
  import feedback from '@/pages/public/feedback.vue';
  import richtext from '@/pages/public/richtext.vue';
  import zbcalendar from '@/pages/study/zbcalendar';
  import success from '@/pages/vasp/success.vue';
  import vaspindex from '@/pages/vasp/index.vue';
  import vasplist from '@/pages/vasp/list.vue';
  import goodCommentadd from '@/pages/goods/comment/add.vue';
  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  const template = computed(() => sheep.$store('app').template.user);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const siteBar=reactive({
    type:true,
    data:[{
      name:'首页',
      url:'/pages/index/index',
    },
      {
        name:'用户中心',
        url:'/pages/index/user',
      }
    ]
  });

  const path = ref('')
  const onSelectPath = (target) => {
    //console.log(target);
    //this.isActive = !e.isActive
    if (path.value !== target) {
      sheep.$router.redirect('/pages/index/user', {
        path: target,
      })
    }
  }

  const grouponId = ref('');
  const onGrouponDetail = (grouponId) => {
    sheep.$router.go('/pages/index/user', {
      path: 'grouponDetail',
      grouponId,
    });
  }

  const orderSN = ref('');
  const onOrderDetail = (orderSN) => {
    sheep.$router.go('/pages/index/user', {
      path: 'orderDetail',
      orderSN,
    });
  }

  const tikuId = ref('');
  const tikuGoodsId = ref('');
  const onTikuDetail = ({id, goods_id}) => {
    path.value = 'mytikuDetail';
    sheep.$router.go('/pages/index/user', {
      path: 'mytikuDetail',
      tikuId: id,
      tikuGoodsId: goods_id
    });
  }

  const getCurrentQuery = () => {
    try {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const fullPath = currentPage.$page.fullPath
      const queryString = fullPath.split('?')[1]
      return queryString ? Object.fromEntries(new URLSearchParams(queryString)) : {}
    } catch (error) {
      console.error('获取参数失败：', error)
      return {}
    }
  }

  onLoad((options) => {
    path.value = options.path;
    orderSN.value = options.orderSN;
    tikuId.value = options.tikuId;
    tikuGoodsId.value = options.tikuGoodsId;
    grouponId.value = options.grouponId;
  });

  onShow(async () => {
    const options = getCurrentQuery();
    if (path.value !== options.path) {
      path.value = options.path;
      orderSN.value = options.orderSN;
      tikuId.value = options.tikuId;
      tikuGoodsId.value = options.tikuGoodsId;
    }
    sheep.$store('user').updateUserData();
  });

</script>

<style lang="scss" scoped>
  :deep(uni-page-body) {
    background-color: #f6f6f6 !important;
  }
  .container {
    padding: 0;
  }
  .separator {
    width: 10px;
    background-color: #f6f6f6;
  }
  .page-app{
    height: auto;
  }
  .page-app .page-main .page-body{
    position: static;
  }
  .icon-area {
    width: 96%;
    margin: 0px auto;
    margin-top: 5px;
  }

  .icon-guwen {
    margin-top: -52px;
  }

  .icon-area uni-image {
    width: 100%;
  }

  .icon-bao {
    position: relative;
  }

  .duihuan {
    position: absolute;
    width: 48%;
    height: 60px;
    top: 5px;
    left: 5px;
  }
  .mybao {
    position: absolute;
    width: 48%;
    height: 60px;
    top: 5px;
    right: 5px;
  }
  .header-text{
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 34px;
  }
  .wxw-wallet{
    background: none !important;
  }
</style>